哇喔～第 10 天～ 破個位數了！

今天來介紹一下前面提到的 props & state

我們知道 React Element 是描述關於此節點最終輸出的畫面資訊，

那在 React Element 到真實畫面的過程，我們就叫做 render

所以像這樣，

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello World~!!</Text>
    </SafeAreaView>
  );
};

最後畫面輸出的是：

但畫面不是靜態的，它是會根據不同的情境去產生變化的，

那每一次畫面的變化，就被稱做 re-render，

那要如何產生 re-render，

我們前面有說過， Component 是具有封閉性，

所以有內、外之分，

• 內部設定 state 控制
• 外部由內部開放 props 來間接干涉運作

那這兩個的特性是：

state

• 代表 component 內部需保存的數據，會影響內部 rendering or data flow
• 封裝在 component 內部， 不會直接流傳到外部
• 一個純物件參數，key-value 形式 ，內容應該是可序列化
• 除了初始化，否則不應該直接改動 state

初始化設定

• constructor

class App extends Component {
  constructor() {
    super();
    this.state = {
      todoList: [],
    };
  }
}

• 外部

class App extends Component {
  state = {
    todoList: [],
  };
}